{% extends "base.html" %}
{% block breadcrumb %}
&gt; Application: {{ case.address }}
{% endblock %}
{% block style %}
<style>
div.case-detail {
  border: 1px solid #ccc;
  margin-right: 300px;
}
div#action-history {
  border: 1px solid #ccc;
  width: 260px;
  float: right;
  margin-top: 0;
}
div.action {
  margin-top: 10px;
  border-top: 1px solid #ccc;
}
div.action span.timestamp {
  float: right;
}
.action-form {
  float: right;
  min-width: 220px;
  max-width: 270px;
  margin: 0;
  margin-right: 10px;
}
.action-form textarea,
.action-form div,
.action-form input {
  margin: 10px;
}
.action-form textarea {
  width: 100%;
}
.action-form div {
  margin-bottom: 0;
}
.action-instruction {
  margin-right: 300px;
}
div.uploadable {
  border-top: 1px solid #CCC;
  min-height: 150px;
  margin-top: 20px;
}
</style>
{% endblock %}
{% block script %}
<script>
var c;
  $(function() {
    $('.button').button();
    $('.upload-button').button({disabled: true});
    {% if case.submit_blockers %}
    $('.approval-button').button({disabled: true});
    $('#approval-form textarea').attr('disabled', true);
    $('#approval-form div').addClass('disabled');
    {% endif %}

    $('.upload-form input.upload-file').change(
      function(event) {
        var button = $(this).nextAll('input');
        c = event.currentTarget;
        b = button;
        if (event.currentTarget.value != '') {
          button.button( "option", "disabled", false );
        } else {
          button.button( "option", "disabled", true );
        }
      });
  });
</script>
{% endblock %}
{% block title %}
<h1>Application In Progress</h1>
{% endblock %}
{% block content %}

<div id="action-history" class="panel">
  <div class="panel-title">Activity Log</div>
  {% for action in actions %}
  <div class="action">
    <span class="timestamp">
      {{ action.timesince }} ago
    </span>
    {{ action.action }}
  </div>
  <div class="detail">
    by {{ action.actor.email }} ({{ action.actor.role }})
    {% if action.purpose %}
    <br/>
    Upload {{ action.purpose }}
    {% endif %}
    {% if action.notes %}
    <br/>
    {{ action.notes }}
    {% endif %}
  </div>
  {% endfor %}
</div>

<div class="case-detail panel">
  <div class="panel-title">
    Basic Information
  </div>
  <div>
    <span class="label">Address</span>
    {{ case.address|e }}
  </div>
  <div>
    <span class="label">Created</span>
    {{ case.creation_date.strftime('%d %b, %Y')|e }}
  </div>
  <div>
    <span class="label">Applicant</span>
    {{ case.owner.email|e }}
  </div>
  <div>
    <span class="label">Status</span>
    {{ case.visible_state|e }}
  </div>
  <a href="/case/emails/{{ case.key().id() }}">Request email notifications</a>
  <div>
    TODO: more info about the case, Solar ABC page 1 form
  </div>
</div>

<div class="case-detail panel">
  <div class="panel-title">
    Required Documents
  </div>
  {% for purpose in uploadables %}
  <div class="uploadable">
    <div class="panel-title">
      {{ purpose }}
    </div>
    {% if user.can_upload %}
    user can upload
    {% endif %}
    {% if user.can_upload and case.applicant_can_edit %}
    <div class="action-form">
      <form class="upload-form"
	    action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
	<input type="hidden" name="purpose" value="{{ purpose }}">
	Upload a new version:
	<br/>
	<input type="file" name="file" class="upload-file">
	<br/>
	<input type="submit" name="upload" value="Upload" disabled
	       class="button upload-button">
      </form>
    </div>
    {% endif %}
    <div class="document-info">
      {% if case.get_document(purpose) %}
	<div>
	<a href="{{ case.get_document(purpose).download_url }}" target="_blank">
	  Get the latest version
	</a>
	<div class="detail">
	{{ case.get_document(purpose).upload.filename }}
	<br/>
	Uploaded
	{{ case.get_document(purpose).timesince }} ago
	<br/>
	by {{ case.get_document(purpose).actor.email }}
	({{ case.get_document(purpose).actor.role }})
	{% if case.get_document(purpose).download_url %}
	<br/>
	{% endif %}
	</div>
      {% if case.get_document(purpose).notes %}
      <pre>{{ case.get_document(purpose).notes }}</pre>
      {% endif %}
      </div>
      {% else %}
      Missing.
      {% endif %}

      <p>
	<a href="/examples/{{ purpose|replace(" ", "_") }}.png" target="_blank">
	  Get an empty example
	</a>
      </p>
    </div>
  </div>
  {% endfor %}
</div>

{% if case.applicant_can_edit and user.role == 'Applicant' %}
<div class="case-detail panel">
  <div class="panel-title">Approval</div>
  <form class="action-form" id="approval-form"
	action="/case/submit/{{ case.key().id() }}" method="POST">
    <div>Note for approver (optional)</div>
    <textarea name="notes" rows=5></textarea>
    <br/>
    <input type="submit" class="action button approval-button"
	   value="Submit for approval">
  </form>
  <p class="action-instruction">
    When this case is up to date and all documentation is complete, you can
    submit the case for approval.
  </p>
  {% if case.submit_blockers %}
  <p class="error">
  Can not submit yet:
  <ul class="error">
  {% for blocker in case.submit_blockers %}
  <li>{{ blocker }}</li>
  {% endfor %}
  </ul>
  </p>
  {% else %}
  Case is complete - ready to submit!
  {% endif %}
  <div style="clear: both"></div>
</div>
{% endif %}

{% if user.can_approve %}
<div class="case-detail panel">
  <div class="panel-title">Needs Work</div>
  <form class="action-form" id="comment-form"
	action="/case/comment/{{ case.key().id() }}" method="POST">
    <div>Note for applicant</div>
    <textarea name="notes" rows=5></textarea>
    <br/>
    <input type="submit" class="action button approval-button"
	   value="Request Changes">
  </form>
  <p class="action-instruction">
    When this case is up to date and all documentation is complete, you can
    approve the case.
  </p>
  <div style="clear: both"></div>
</div>

<div class="case-detail panel">
  <div class="panel-title">Approval</div>
  <form class="action-form" id="approval-form"
	action="/case/approve/{{ case.key().id() }}" method="POST">
    <div>Note for applicant (optional)</div>
    <textarea name="notes" rows=5></textarea>
    <br/>
    <input type="submit" class="action button approval-button"
	   value="Approve">
  </form>
  <p class="action-instruction">
    When this case is up to date and all documentation is complete, you can
    approve the case.
  </p>
  <div style="clear: both"></div>
</div>
{% endif %}

<div>
  <a href="/" class="button">
    Home
  </a>
</div>

{% endblock %}
